<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>Buttons & Icon - Ace Admin</title>
		<meta name="description" content="Common Buttons & Icons" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<!-- basic styles -->
		<link href="css/bootstrap.min.css" rel="stylesheet" />
		<link href="css/bootstrap-responsive.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/font-awesome.min.css" />
		<!--[if IE 7]>
		  <link rel="stylesheet" href="css/font-awesome-ie7.min.css" />
		<![endif]-->
		<!-- page specific plugin styles -->
		
		<!-- ace styles -->
		<link rel="stylesheet" href="css/ace.min.css" />
		<link rel="stylesheet" href="css/ace-responsive.min.css" />
		<link rel="stylesheet" href="css/ace-skins.min.css" />
		<!--[if lt IE 9]>
		  <link rel="stylesheet" href="css/ace-ie.min.css" />
		<![endif]-->
	</head>
	<body>
		<div class="navbar navbar-inverse">
		  <div class="navbar-inner">
		   <div class="container-fluid">
			  <a class="brand" href="#"><small><i class="icon-leaf"></i> Ace Admin</small> </a>
			  <ul class="nav ace-nav pull-right">
					<li class="grey">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown">
							<i class="icon-tasks"></i>
							<span class="badge">4</span>
						</a>
						<ul class="pull-right dropdown-navbar dropdown-menu dropdown-caret dropdown-closer">
							<li class="nav-header">
								<i class="icon-ok"></i> 4 Tasks to complete
							</li>
							
							<li>
								<a href="#">
									<div class="clearfix">
										<span class="pull-left">Software Update</span>
										<span class="pull-right">65%</span>
									</div>
									<div class="progress progress-mini"><div class="bar" style="width:65%"></div></div>
								</a>
							</li>
							
							<li>
								<a href="#">
									<div class="clearfix">
										<span class="pull-left">Hardware Upgrade</span>
										<span class="pull-right">35%</span>
									</div>
									<div class="progress progress-mini progress-danger"><div class="bar" style="width:35%"></div></div>
								</a>
							</li>
							
							<li>
								<a href="#">
									<div class="clearfix">
										<span class="pull-left">Unit Testing</span>
										<span class="pull-right">15%</span>
									</div>
									<div class="progress progress-mini progress-warning"><div class="bar" style="width:15%"></div></div>
								</a>
							</li>
							
							<li>
								<a href="#">
									<div class="clearfix">
										<span class="pull-left">Bug Fixes</span>
										<span class="pull-right">90%</span>
									</div>
									<div class="progress progress-mini progress-success progress-striped active"><div class="bar" style="width:90%"></div></div>
								</a>
							</li>
							
							<li>
								<a href="#">
									See tasks with details
									<i class="icon-arrow-right"></i>
								</a>
							</li>
						</ul>
					</li>
					<li class="purple">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown">
							<i class="icon-bell-alt icon-animated-bell icon-only"></i>
							<span class="badge badge-important">8</span>
						</a>
						<ul class="pull-right dropdown-navbar navbar-pink dropdown-menu dropdown-caret dropdown-closer">
							<li class="nav-header">
								<i class="icon-warning-sign"></i> 8 Notifications
							</li>
							
							<li>
								<a href="#">
									<div class="clearfix">
										<span class="pull-left"><i class="icon-comment btn btn-mini btn-pink"></i> New comments</span>
										<span class="pull-right badge badge-info">+12</span>
									</div>
								</a>
							</li>
							
							<li>
								<a href="#">
									<i class="icon-user btn btn-mini btn-primary"></i> Bob just signed up as an editor ...
								</a>
							</li>
							
							<li>
								<a href="#">
									<div class="clearfix">
										<span class="pull-left"><i class="icon-shopping-cart btn btn-mini btn-success"></i> New orders</span>
										<span class="pull-right badge badge-success">+8</span>
									</div>
								</a>
							</li>
							
							<li>
								<a href="#">
									<div class="clearfix">
										<span class="pull-left"><i class="icon-twitter btn btn-mini btn-info"></i> Followers</span>
										<span class="pull-right badge badge-info">+4</span>
									</div>
								</a>
							</li>
																
							<li>
								<a href="#">
									See all notifications
									<i class="icon-arrow-right"></i>
								</a>
							</li>
						</ul>
					</li>
					<li class="green">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown">
							<i class="icon-envelope-alt icon-animated-vertical icon-only"></i>
							<span class="badge badge-success">5</span>
						</a>
						<ul class="pull-right dropdown-navbar dropdown-menu dropdown-caret dropdown-closer">
							<li class="nav-header">
								<i class="icon-envelope"></i> 5 Messages
							</li>
							
							<li>
								<a href="#">
									<img alt="Alex's Avatar" class="msg-photo" src="avatars/avatar.png" />
									<span class="msg-body">
										<span class="msg-title">
											<span class="blue">Alex:</span>
											Ciao sociis natoque penatibus et auctor ...
										</span>
										<span class="msg-time">
											<i class="icon-time"></i> <span>a moment ago</span>
										</span>
									</span>
								</a>
							</li>
							
							<li>
								<a href="#">
									<img alt="Susan's Avatar" class="msg-photo" src="avatars/avatar3.png" />
									<span class="msg-body">
										<span class="msg-title">
											<span class="blue">Susan:</span>
											Vestibulum id ligula porta felis euismod ...
										</span>
										<span class="msg-time">
											<i class="icon-time"></i> <span>20 minutes ago</span>
										</span>
									</span>
								</a>
							</li>
							
							<li>
								<a href="#">
									<img alt="Bob's Avatar" class="msg-photo" src="avatars/avatar4.png" />
									<span class="msg-body">
										<span class="msg-title">
											<span class="blue">Bob:</span>
											Nullam quis risus eget urna mollis ornare ...
										</span>
										<span class="msg-time">
											<i class="icon-time"></i> <span>3:15 pm</span>
										</span>
									</span>
								</a>
							</li>
							
							<li>
								<a href="#">
									See all messages
									<i class="icon-arrow-right"></i>
								</a>
							</li>									
	
						</ul>
					</li>
					<li class="light-blue user-profile">
						<a class="user-menu dropdown-toggle" href="#" data-toggle="dropdown">
							<img alt="Jason's Photo" src="avatars/user.jpg" class="nav-user-photo" />
							<span id="user_info">
								<small>Welcome,</small> Jason
							</span>
							<i class="icon-caret-down"></i>
						</a>
						<ul id="user_menu" class="pull-right dropdown-menu dropdown-yellow dropdown-caret dropdown-closer">
							<li><a href="#"><i class="icon-cog"></i> Settings</a></li>
							<li><a href="#"><i class="icon-user"></i> Profile</a></li>
							<li class="divider"></li>
							<li><a href="#"><i class="icon-off"></i> Logout</a></li>
						</ul>
					</li>
			  </ul><!--/.ace-nav-->
		   </div><!--/.container-fluid-->
		  </div><!--/.navbar-inner-->
		</div><!--/.navbar-->
		<div class="container-fluid" id="main-container">
			<a href="#" id="menu-toggler"><span></span></a><!-- menu toggler -->

			<div id="sidebar">
				
				<div id="sidebar-shortcuts">
					<div id="sidebar-shortcuts-large">
						<button class="btn btn-small btn-success"><i class="icon-signal"></i></button>
						<button class="btn btn-small btn-info"><i class="icon-pencil"></i></button>
						<button class="btn btn-small btn-warning"><i class="icon-group"></i></button>
						<button class="btn btn-small btn-danger"><i class="icon-cogs"></i></button>
					</div>
					<div id="sidebar-shortcuts-mini">
						<span class="btn btn-success"></span>
						<span class="btn btn-info"></span>
						<span class="btn btn-warning"></span>
						<span class="btn btn-danger"></span>
					</div>
				</div><!-- #sidebar-shortcuts -->

				<ul class="nav nav-list">
					
					<li>
					  <a href="index.html">
						<i class="icon-dashboard"></i>
						<span>Dashboard</span>
						
					  </a>
					</li>

					
					<li>
					  <a href="typography.html">
						<i class="icon-text-width"></i>
						<span>Typography</span>
						
					  </a>
					</li>

					
					<li class="active open">
					  <a href="#" class="dropdown-toggle" >
						<i class="icon-desktop"></i>
						<span>UI Elements</span>
						<b class="arrow icon-angle-down"></b>
					  </a>
					  <ul class="submenu">
						<li><a href="elements.html"><i class="icon-double-angle-right"></i> Elements</a></li>
						<li class="active"><a href="buttons.html"><i class="icon-double-angle-right"></i> Buttons & Icons</a></li>
					  </ul>
					</li>

					
					<li>
					  <a href="tables.html">
						<i class="icon-list"></i>
						<span>Tables</span>
						
					  </a>
					</li>

					
					<li>
					  <a href="#" class="dropdown-toggle" >
						<i class="icon-edit"></i>
						<span>Forms</span>
						<b class="arrow icon-angle-down"></b>
					  </a>
					  <ul class="submenu">
						<li><a href="form-elements.html"><i class="icon-double-angle-right"></i> Form Elements</a></li>
						<li><a href="form-wizard.html"><i class="icon-double-angle-right"></i> Wizard & Validation</a></li>
					  </ul>
					</li>

					
					<li>
					  <a href="widgets.html">
						<i class="icon-list-alt"></i>
						<span>Widgets</span>
						
					  </a>
					</li>

					
					<li>
					  <a href="calendar.html">
						<i class="icon-calendar"></i>
						<span>Calendar</span>
						
					  </a>
					</li>

					
					<li>
					  <a href="gallery.html">
						<i class="icon-picture"></i>
						<span>Gallery</span>
						
					  </a>
					</li>

					
					<li>
					  <a href="grid.html">
						<i class="icon-th"></i>
						<span>Grid</span>
						
					  </a>
					</li>

					
					<li>
					  <a href="#" class="dropdown-toggle" >
						<i class="icon-file"></i>
						<span>Other Pages</span>
						<b class="arrow icon-angle-down"></b>
					  </a>
					  <ul class="submenu">
						<li><a href="pricing.html"><i class="icon-double-angle-right"></i> Pricing Tables</a></li>
						<li><a href="invoice.html"><i class="icon-double-angle-right"></i> Invoice</a></li>
						<li><a href="login.html"><i class="icon-double-angle-right"></i> Login & Register</a></li>
						<li><a href="error-404.html"><i class="icon-double-angle-right"></i> Error 404</a></li>
						<li><a href="error-500.html"><i class="icon-double-angle-right"></i> Error 500</a></li>
						<li><a href="blank.html"><i class="icon-double-angle-right"></i> Blank Page</a></li>
					  </ul>
					</li>

					
				</ul><!--/.nav-list-->

				<div id="sidebar-collapse"><i class="icon-double-angle-left"></i></div>


			</div><!--/#sidebar-->

		
			<div id="main-content" class="clearfix">
					
					<div id="breadcrumbs">
						<ul class="breadcrumb">
							<li><i class="icon-home"></i> <a href="#">Home</a><span class="divider"><i class="icon-angle-right"></i></span></li>
							<li><a href="#">UI Elements</a> <span class="divider"><i class="icon-angle-right"></i></span></li>
							<li class="active">Buttons & Icons</li>
						</ul><!--.breadcrumb-->

						<div id="nav-search">
							<form class="form-search">
									<span class="input-icon">
										<input autocomplete="off" id="nav-search-input" type="text" class="input-small search-query" placeholder="Search ..." />
										<i id="nav-search-icon" class="icon-search"></i>
									</span>
							</form>
						</div><!--#nav-search-->
					</div><!--#breadcrumbs-->

					<div id="page-content" class="clearfix">
						
						<div class="page-header position-relative">
							<h1>Buttons & Icon <small><i class="icon-double-angle-right"></i> Common Buttons & Icons</small></h1>
						</div><!--/page-header-->
						
						<div class="row-fluid">
<!-- PAGE CONTENT BEGINS HERE -->
<div class="row-fluid">
	<h3 class="header smaller lighter green">Application Buttons</h3>
	<p>
		<a href="#" class="btn btn-app radius-4">
		<i class="icon-cog"></i>
		Default
		<span class="badge badge-pink">+3</span>
		</a>
		
		<a href="#" class="btn btn-app btn-primary no-radius">
		<i class="icon-edit"></i>
		Edit
		<span class="badge badge-warning badge-right">11</span>
		</a>
		
		<a href="#"  class="btn btn-app btn-success">
		<i class="icon-refresh"></i>
		Reload
		</a>
		
		<button class="btn btn-app btn-warning">
		<i class="icon-undo"></i>
		Undo
		</button>
		<a href="#" class="btn btn-app btn-info btn-small no-radius">
		<i class="icon-envelope"></i>
		Mailbox
		<span class="label label-inverse arrowed-in">6+</span>
		</a>
		
		<button class="btn btn-app btn-danger btn-small">
		<i class="icon-trash"></i>
		Delete
		</button>
		
		<button class="btn btn-app btn-purple btn-small">
		<i class="icon-cloud-upload"></i>
		Upload
		</button>
		
		<button class="btn btn-app btn-pink btn-small">
		<i class="icon-share-alt"></i>
		Share
		</button>
		
		<button class="btn btn-app btn-inverse btn-mini">
		<i class="icon-lock"></i>
		Lock
		</button>
		
		<button class="btn btn-app btn-grey btn-mini radius-4">
		<i class="icon-save"></i>
		Save
		<span class="badge badge-transparent"><i class="light-red icon-asterisk"></i></span>
		</button>
		
		<button class="btn btn-app btn-light btn-mini">
		<i class="icon-print"></i>
		Print
		</button>
		
		<a href="#" class="btn btn-app btn-yellow btn-mini">
		<i class="icon-shopping-cart"></i>
		Shop
		</a>
	</p>
</div>
<div class="row-fluid">
 <div class="span6">
	<h3 class="header smaller lighter purple">Default Buttons</h3>
	<p>
		<button class="btn">Default </button>
		<button class="btn btn-primary">Primary</button>
		<button class="btn btn-info">Info</button>
		<button class="btn btn-success">Success</button>
	</p>
	<p>
		<button class="btn btn-warning">Warning</button>
		<button class="btn btn-danger">Danger</button>
		<button class="btn btn-inverse">Inverse</button>
		<button class="btn btn-pink">Pink</button>
	</p>
	<p>
		<button class="btn btn-purple">Purple</button>
		<button class="btn btn-yellow">Yellow</button>
		<button class="btn btn-grey">Grey</button>
		<button class="btn btn-light">Light</button>
		<button class="btn-link">Link</button>
	</p>
	
	<h3 class="header smaller lighter green">Button with Icons</h3>
	<p>
		<button class="btn"><i class="icon-pencil"></i> Default </button>
		<button class="btn btn-primary"><i class="icon-beaker"></i> Primary</button>
		<button class="btn btn-info">Info <i class="icon-print icon-on-right"></i></button>
	</p>
	<p>
		<button class="btn btn-large btn-success"><i class="icon-ok"></i> Success</button>
		<button class="btn btn-small btn-warning"><i class="icon-fire"></i> Warning</button>
		<button class="btn btn-mini btn-danger"><i class="icon-bolt"></i> Danger <i class="icon-arrow-right  icon-on-right"></i></button>
	</p>
	<p>
		<button class="btn btn-info"><i class="icon-signal icon-3x icon-only"></i></button>
		<button class="btn btn-warning btn-mini"><i class="icon-wrench icon-2x icon-only"></i></button>
		<button class="btn btn-danger btn-small"><i class="icon-reply icon-2x icon-only"></i></button>
		<button class="btn btn-grey btn-large"><i class="icon-trash icon-4x icon-only"></i></button>
	</p>
 </div><!--/span-->
 <div class="span6">
	<h3 class="header smaller lighter red">Button Sizing</h3>
	<p>
		<button class="btn btn-minier btn-yellow">Minier</button>
		<button class="btn btn-mini">Mini</button>
		<button class="btn btn-small btn-primary">Small</button>
		<button class="btn btn-info">Default</button>
		<button class="btn btn-large btn-success">Large Size</button>
	</p>
	
	<p>
		<button class="btn btn-warning btn-large">Large Size</button>
		<button class="btn btn-danger">Default</button>
		<button class="btn btn-small btn-inverse">Small</button>
		<button class="btn btn-mini btn-pink">Pink</button>
		<button class="btn btn-minier btn-purple">Purple</button>
	</p>
	
	<h3 class="header smaller lighter grey">Disabled Buttons</h3>
	<p>
		<button class="btn disabled">Default </button>
		<button class="btn disabled btn-primary">Primary</button>
		<button class="btn disabled btn-info">Info</button>
		<button class="btn disabled btn-success">Success</button>
	</p>
	<hr />
	<p>
		<button class="btn btn-danger btn-block">Block Button</button>
	</p>
	
 </div><!--/span-->
</div><!--/row-->
<hr />
<div class="row-fluid">
 <div class="span6">
	<h3 class="header smaller lighter blue">Button Groups</h3>
	<p>
		<div class="btn-group">
			<button class="btn">1</button>
			<button class="btn">2</button>
			<button class="btn">3</button>
		</div>
	<p>
		<div class="btn-toolbar">
			<div class="btn-group">
				<button class="btn btn-light">1</button>
				<button class="btn btn-light">2</button>
				<button class="btn btn-light">3</button>
				<button class="btn btn-light">4</button>
			</div>
			<div class="btn-group">
				<button class="btn">5</button>
				<button class="btn">6</button>
				<button class="btn">7</button>
			</div>
			<div class="btn-group">
				<button class="btn btn-grey">8</button>
			</div>
		</div>
	<p>
		<div class="btn-group btn-group-vertical">
			<button class="btn" type="button"><i class="icon-only icon-align-left"></i></button>
			<button class="btn" type="button"><i class="icon-only icon-align-center"></i></button>
			<button class="btn" type="button"><i class="icon-only icon-align-right"></i></button>
			<button class="btn" type="button"><i class="icon-only icon-align-justify"></i></button>
		</div>
		<div class="space-6"></div>
		
	<p>
		<button id="loading-btn" type="button" class="btn btn-success" data-loading-text="Loading...">Loading state</button>
		<button type="button" class="btn btn-primary" data-toggle="button" >Single Toggle</button>
		<button type="button" class="btn btn-small btn-danger" data-toggle="button" >Small</button>
		<button type="button" class="btn btn-mini btn-info" data-toggle="button" >Mini</button>
	
	<p>
	  <div>
		<span>Checkbox: &nbsp;</span>
		<div data-toggle="buttons-checkbox" class="btn-group">
			<button class="btn btn-small" type="button"><i class="icon-only icon-bold"></i></button>
			<button class="btn btn-small" type="button"><i class="icon-only icon-italic"></i></button>
			<button class="btn btn-small" type="button"><i class="icon-only icon-underline"></i></button>
		</div>
	  </div>
	
	<p>
	  <div>
		<span>Radio: &nbsp;</span>
		<div data-toggle="buttons-radio" class="btn-group">
			<button class="btn btn-primary" type="button"><i class="icon-only icon-align-left"></i></button>
			<button class="btn btn-primary" type="button"><i class="icon-only icon-align-center"></i></button>
			<button class="btn btn-primary" type="button"><i class="icon-only icon-align-right"></i></button>
		</div>
		<button class="btn btn-primary" type="button" data-toggle="button"><i class="icon-only icon-align-justify"></i></button>
	  </div>
 </div><!--/span-->
 <div class="span6">
	<h3 class="header smaller lighter green">Button Dropdown</h3>
	<p>
		<div class="btn-toolbar">
		  <div class="btn-group">
			<button data-toggle="dropdown" class="btn dropdown-toggle">Action <span class="caret"></span></button>
			<ul class="dropdown-menu">
			  <li><a href="#">Action</a></li>
			  <li><a href="#">Another action</a></li>
			  <li><a href="#">Something else here</a></li>
			  <li class="divider"></li>
			  <li><a href="#">Separated link</a></li>
			</ul>
		  </div><!-- /btn-group -->
		  <div class="btn-group">
			<button data-toggle="dropdown" class="btn btn-primary dropdown-toggle">Action <i class="icon-angle-down icon-on-right"></i></button>
			<ul class="dropdown-menu">
			  <li><a href="#">Action</a></li>
			  <li><a href="#">Another action</a></li>
			  <li><a href="#">Something else here</a></li>
			  <li class="divider"></li>
			  <li><a href="#">Separated link</a></li>
			</ul>
		  </div><!-- /btn-group -->
		  <div class="btn-group">
			<button data-toggle="dropdown" class="btn btn-small btn-danger dropdown-toggle">Danger <i class="icon-angle-down icon-on-right"></i></button>
			<ul class="dropdown-menu">
			  <li><a href="#">Action</a></li>
			  <li><a href="#">Another action</a></li>
			  <li><a href="#">Something else here</a></li>
			  <li class="divider"></li>
			  <li><a href="#">Separated link</a></li>
			</ul>
		  </div><!-- /btn-group -->
		</div>
	
	<p>
		<div class="btn-toolbar">
		  <div class="btn-group">
			<button data-toggle="dropdown" class="btn btn-warning dropdown-toggle">Warning <span class="caret"></span></button>
			<ul class="dropdown-menu">
			  <li><a href="#">Action</a></li>
			  <li><a href="#">Another action</a></li>
			  <li><a href="#">Something else here</a></li>
			  <li class="divider"></li>
			  <li><a href="#">Separated link</a></li>
			</ul>
		  </div><!-- /btn-group -->
		  <div class="btn-group">
			<button data-toggle="dropdown" class="btn btn-success btn-large dropdown-toggle">Success large <i class="icon-angle-down icon-on-right"></i></button>
			<ul class="dropdown-menu">
			  <li><a href="#">Action</a></li>
			  <li><a href="#">Another action</a></li>
			  <li><a href="#">Something else here</a></li>
			  <li class="divider"></li>
			  <li><a href="#">Separated link</a></li>
			</ul>
		  </div><!-- /btn-group -->
		  <div class="btn-group">
			<button data-toggle="dropdown" class="btn btn-info btn-small dropdown-toggle">Info small <span class="caret"></span></button>
			<ul class="dropdown-menu">
			  <li><a href="#">Action</a></li>
			  <li><a href="#">Another action</a></li>
			  <li><a href="#">Something else here</a></li>
			  <li class="divider"></li>
			  <li><a href="#">Separated link</a></li>
			</ul>
		  </div><!-- /btn-group -->
		  <div class="btn-group">
			<button data-toggle="dropdown" class="btn btn-inverse btn-mini dropdown-toggle">Inverse mini <span class="caret"></span></button>
			<ul class="dropdown-menu">
			  <li><a href="#">Action</a></li>
			  <li><a href="#">Another action</a></li>
			  <li><a href="#">Something else here</a></li>
			  <li class="divider"></li>
			  <li><a href="#">Separated link</a></li>
			</ul>
		  </div><!-- /btn-group -->
		</div>
	<hr />
	<p>
		<div class="btn-toolbar">
			<div class="btn-group">
                <button class="btn">Action</button>
                <button data-toggle="dropdown" class="btn dropdown-toggle"><span class="caret"></span></button>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
              </div><!-- /btn-group -->
              <div class="btn-group">
                <button class="btn btn-small btn-primary">Some Action</button>
                <button data-toggle="dropdown" class="btn btn-small btn-primary dropdown-toggle"><i class="icon-angle-down"></i></button>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
              </div><!-- /btn-group -->
              <div class="btn-group dropup">
                <button class="btn btn-mini btn-danger">Danger</button>
                <button data-toggle="dropdown" class="btn btn-mini btn-danger dropdown-toggle"><span class="caret"></span></button>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
              </div><!-- /btn-group -->
		<p>
              <div class="btn-group">
                <button class="btn btn-large btn-warning">Warning</button>
                <button data-toggle="dropdown" class="btn btn-large btn-warning dropdown-toggle"><span class="caret"></span></button>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
              </div><!-- /btn-group -->
              <div class="btn-group">
                <button class="btn btn-success">Success</button>
                <button data-toggle="dropdown" class="btn btn-success dropdown-toggle"><span class="caret"></span></button>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
              </div><!-- /btn-group -->
              <div class="btn-group">
                <button class="btn btn-info">Info</button>
                <button data-toggle="dropdown" class="btn btn-info dropdown-toggle"><span class="caret"></span></button>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
              </div><!-- /btn-group -->
		<p>
              <div class="btn-group">
                <button class="btn btn-inverse">Inverse</button>
                <button data-toggle="dropdown" class="btn btn-inverse dropdown-toggle"><span class="caret"></span></button>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
              </div><!-- /btn-group -->
            </div>
			
 </div><!--/span-->
</div><!--/row-->
<hr />
<div class="row-fluid">
	<div class="span6">
		<h3 class="header smaller lighter green">Lables & Badges</h3>
		<p>
			<span class="label">Default</span>
			<span class="label label-success arrowed">Success</span>
			<span class="label label-warning">Warning</span>
			<span class="label label-important arrowed-in">Important</span>
			<span class="label label-info arrowed-in-right arrowed">Info</span>
			<span class="label label-inverse">Inverse</span>
		</p>
		<p>
			<span class="badge">1</span>
			<span class="badge badge-success">2</span>
			<span class="badge badge-warning">4</span>
			<span class="badge badge-important">6</span>
			<span class="badge badge-info">8</span>
			<span class="badge badge-inverse">10</span>
		</p>
		<p>
			<span class="label label-large label-pink arrowed-right">Larger</span>
			<span class="label label-large label-yellow arrowed-in">Yellow</span>
			<span class="label label-large label-purple">Purple</span>
			<span class="label label-large label-grey arrowed-in-right arrowed-in">Grey</span>
			<span class="label label-large label-light arrowed-in-right">Light</span>
		</p>
		
		
	</div><!--/span-->
	
	<div class="span6">
		<h3 class="header smaller lighter red">Pagination</h3>
		<p>
			<div class="pagination">
              <ul>
                <li class="disabled"><a href="#"><i class="icon-double-angle-left"></i></a></li>
                <li class="active"><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#"><i class="icon-double-angle-right"></i></a></li>
              </ul>
            </div>
		
		<p>
			<ul class="pager">
              <li class="previous"><a href="#">&larr; Older</a></li>
              <li class="next"><a href="#">Newer &rarr;</a></li>
            </ul>
		
	</div><!--/span-->
</div><!--/row-->
<hr />
<div class="row-fluid">
	<div class="row-fluid">
		<h3 class="header smaller lighter blue">FontAwesome Icons <small><a href="http://fortawesome.github.com/Font-Awesome/" target="_blank">(see all icons <i class="icon-external-link"></i>)</a> </small></h3>
	</div>
	
	<div class="row-fluid">
	<div class="span3">
    <ul class="unstyled the-icons">
		<li><i class="icon-adjust"></i> icon-adjust</li>
		<li><i class="icon-asterisk"></i> icon-asterisk</li>
		<li><i class="icon-ban-circle"></i> icon-ban-circle</li>
		<li><i class="icon-bar-chart"></i> icon-bar-chart</li>
		<li><i class="icon-barcode"></i> icon-barcode</li>
		<li><i class="icon-beaker"></i> icon-beaker</li>
		<li><i class="icon-beer"></i> icon-beer</li>
		<li><i class="icon-bell"></i> icon-bell</li>
		<li><i class="icon-bell-alt"></i> icon-bell-alt</li>
		<li><i class="icon-bolt"></i> icon-bolt</li>
		<li><i class="icon-book"></i> icon-book</li>
		<li><i class="icon-bookmark"></i> icon-bookmark</li>
		<li><i class="icon-bookmark-empty"></i> icon-bookmark-empty</li>
		<li><i class="icon-briefcase"></i> icon-briefcase</li>
		<li><i class="icon-bullhorn"></i> icon-bullhorn</li>
		<li><i class="icon-calendar"></i> icon-calendar</li>
		<li><i class="icon-camera"></i> icon-camera</li>
		<li><i class="icon-camera-retro"></i> icon-camera-retro</li>
		<li><i class="icon-certificate"></i> icon-certificate</li>
	</ul>
    </div>
	
	<div class="span3">
    <ul class="unstyled the-icons">
		<li><i class="icon-check"></i> icon-check</li>
		<li><i class="icon-check-empty"></i> icon-check-empty</li>
		<li><i class="icon-circle"></i> icon-circle</li>
		<li><i class="icon-circle-blank"></i> icon-circle-blank</li>
		<li><i class="icon-cloud"></i> icon-cloud</li>
		<li><i class="icon-cloud-download"></i> icon-cloud-download</li>
		<li><i class="icon-cloud-upload"></i> icon-cloud-upload</li>
		<li><i class="icon-coffee"></i> icon-coffee</li>
		<li><i class="icon-cog"></i> icon-cog</li>
		<li><i class="icon-cogs"></i> icon-cogs</li>
		<li><i class="icon-comment"></i> icon-comment</li>
		<li><i class="icon-comment-alt"></i> icon-comment-alt</li>
		<li><i class="icon-comments"></i> icon-comments</li>
		<li><i class="icon-comments-alt"></i> icon-comments-alt</li>
		<li><i class="icon-credit-card"></i> icon-credit-card</li>
		<li><i class="icon-dashboard"></i> icon-dashboard</li>
		<li><i class="icon-desktop"></i> icon-desktop</li>
		<li><i class="icon-download"></i> icon-download</li>
		<li><i class="icon-download-alt"></i> icon-download-alt</li>
    </ul>
  </div>
  
  <div class="span3">
	<ul class="unstyled the-icons">
		<li><i class="icon-edit"></i> icon-edit</li>
		<li><i class="icon-envelope"></i> icon-envelope</li>
		<li><i class="icon-envelope-alt"></i> icon-envelope-alt</li>
		<li><i class="icon-exchange"></i> icon-exchange</li>
		<li><i class="icon-exclamation-sign"></i> icon-exclamation-sign</li>
		<li><i class="icon-external-link"></i> icon-external-link</li>
		<li><i class="icon-eye-close"></i> icon-eye-close</li>
		<li><i class="icon-eye-open"></i> icon-eye-open</li>
		<li><i class="icon-facetime-video"></i> icon-facetime-video</li>
		<li><i class="icon-fighter-jet"></i> icon-fighter-jet</li>
		<li><i class="icon-film"></i> icon-film</li>
		<li><i class="icon-filter"></i> icon-filter</li>
		<li><i class="icon-fire"></i> icon-fire</li>
		<li><i class="icon-flag"></i> icon-flag</li>
		<li><i class="icon-folder-close"></i> icon-folder-close</li>
		<li><i class="icon-folder-open"></i> icon-folder-open</li>
		<li><i class="icon-folder-close-alt"></i> icon-folder-close-alt</li>
		<li><i class="icon-folder-open-alt"></i> icon-folder-open-alt</li>
		<li><i class="icon-food"></i> icon-food</li>
	</ul>
  </div>
	
  <div class="span3">
    <ul class="unstyled the-icons">
		<li><i class="icon-gift"></i> icon-gift</li>
		<li><i class="icon-glass"></i> icon-glass</li>
		<li><i class="icon-globe"></i> icon-globe</li>
		<li><i class="icon-group"></i> icon-group</li>
		<li><i class="icon-hdd"></i> icon-hdd</li>
		<li><i class="icon-headphones"></i> icon-headphones</li>
		<li><i class="icon-heart"></i> icon-heart</li>
		<li><i class="icon-heart-empty"></i> icon-heart-empty</li>
		<li><i class="icon-home"></i> icon-home</li>
		<li><i class="icon-inbox"></i> icon-inbox</li>
		<li><i class="icon-info-sign"></i> icon-info-sign</li>
		<li><i class="icon-key"></i> icon-key</li>
		<li><i class="icon-leaf"></i> icon-leaf</li>
		<li><i class="icon-laptop"></i> icon-laptop</li>
		<li><i class="icon-legal"></i> icon-legal</li>
		<li><i class="icon-lemon"></i> icon-lemon</li>
		<li><i class="icon-lightbulb"></i> icon-lightbulb</li>
		<li><i class="icon-lock"></i> icon-lock</li>
		<li><i class="icon-unlock"></i> icon-unlock</li>
    </ul>
  </div>
 </div>
</div>
<!-- PAGE CONTENT ENDS HERE -->
						 </div><!--/row-->
	
					</div><!--/#page-content-->
					  
					<div id="ace-settings-container">
						<div class="btn btn-app btn-mini btn-warning" id="ace-settings-btn">
							<i class="icon-cog"></i>
						</div>
						<div id="ace-settings-box">
							<div>
								<div class="pull-left">
									<select id="skin-colorpicker" class="hidden">
										<option data-class="default" value="#438EB9">#438EB9</option>
										<option data-class="skin-1" value="#222A2D">#222A2D</option>
										<option data-class="skin-2" value="#C6487E">#C6487E</option>
										<option data-class="skin-3" value="#D0D0D0">#D0D0D0</option>
									</select>
								</div>
								<span>&nbsp; Choose Skin</span>
							</div>
							<div><input type="checkbox" class="ace-checkbox-2" id="ace-settings-header" /><label class="lbl" for="ace-settings-header"> Fixed Header</label></div>
							<div><input type="checkbox" class="ace-checkbox-2" id="ace-settings-sidebar" /><label class="lbl" for="ace-settings-sidebar"> Fixed Sidebar</label></div>
						</div>
					</div><!--/#ace-settings-container-->
			</div><!-- #main-content -->
		</div><!--/.fluid-container#main-container-->
		<a href="#" id="btn-scroll-up" class="btn btn-small btn-inverse">
			<i class="icon-double-angle-up icon-only"></i>
		</a>
		<!-- basic scripts -->
		<script src="1.9.1/jquery.min.js"></script>
		<script type="text/javascript">
		window.jQuery || document.write("<script src='js/jquery-1.9.1.min.js'>\x3C/script>");
		</script>
		
		<script src="js/bootstrap.min.js"></script>
		<!-- page specific plugin scripts -->
		
		<!-- ace scripts -->
		<script src="js/ace-elements.min.js"></script>
		<script src="js/ace.min.js"></script>
		<!-- inline scripts related to this page -->
		
		<script type="text/javascript">
		$(function() {
	$('#loading-btn').on('click', function () {
		var btn = $(this);
		btn.button('loading')
		setTimeout(function () {
			btn.button('reset')
		}, 2000)
	});
})
		</script>
	</body>
</html>
